<template
  <!-- 父组件 -->
  <view class="parent-container">
    <view class="table-container">
      <uni-table :data="wdDataList" border>
        <uni-tr>
          <uni-th style="font-size: 20rpx;" width="50rpx">编号</uni-th>
          <uni-th style="font-size: 20rpx;" width="200rpx">名称</uni-th>
          <uni-th style="font-size: 20rpx;" width="80rpx">参数值</uni-th>
          <uni-th style="font-size: 20rpx;" width="80rpx">报警值</uni-th>
          <uni-th style="font-size: 20rpx;" width="60rpx">状态</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in wdDataList" :key="index">
          <uni-td style="font-size: 20rpx;">{{ item.no }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.name }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.currentValue + '/' + item.unit }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.warningValue + '/' + item.unit }}</uni-td>
          <uni-td style="font-size: 20rpx; position: relative;">
            <CardDataPoint
              :data="item.currentValue"
              :point="item.warningValue"
              :open="item.symbol"
              top="25"
              left="25"
            ></CardDataPoint>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, inject } from 'vue';
import CardDataPoint from '@/components/point.vue';
import labTable from '@/mixins/table.json';

const props = defineProps({
    id: Number
});
let allData = inject('allData');
let wdDataList = ref([]);

watch(
    () => allData.value,
    (newVal, oldVal) => {
        let tmpData = props.id == 1 ? newVal.left_main : newVal.right_main;
        let tmpJson = props.id == 1 ? labTable.left_main : labTable.right_main;
        tmpData = tmpData || {};
        let datakey = Object.keys(tmpData).filter((item) => {
            return tmpJson[item] ? tmpJson[item].name.slice(-2) === "温度" : false;
        });
        let dataList = [];
        datakey.forEach((item, index) => {
            let tmpJson = props.id == 1 ? labTable.left_main : labTable.right_main;
            tmpData[item].unit = tmpJson[item].unit;
            tmpData[item].name = tmpJson[item].name;
            tmpData[item].no = tmpJson[item].no;
            if (tmpData[item].name.slice(-4) === "轴承温度" || tmpData[item].name.slice(-4) === "排气温度") {
                return false;
            }
            dataList.push(tmpData[item]);
        });
        dataList.sort((p, n) => {
            return +(p.columnname.substring(1)) - +(n.columnname.substring(1));
        });
        wdDataList.value = dataList;
    
    },
    {
        deep: true
    }
);
</script>

<style scoped>
.parent-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 80%; /* 假设父组件高度为视口高度 */
}

.table-container {
  width: 90%; /* 可根据需要调整宽度 */
  height: 90%; /* 高度为父组件的一半 */
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
}
</style>